<div class="conflicts-page flex-horizontal flex-stretch-items absolute-fill content-margin">
    <div class="flex-vertical">
        <div class="conflicts-list-container flex-vertical flex-grow" style="position:relative;">
            <virtual-grid class="resizable flex-window conflicts-grid conflicts-grid" params="controller: gridController, emptyTemplate: 'no-conflicts-found-template'"></virtual-grid>
        </div>
    </div>
    <div class="flex-grow" data-bind="visible: !hasDetailsLoaded()">
        <div class="panel padding">
            <h2 class="text-center"><i class="icon-force"></i><span>Pick a conflicting document to resolve</span></h2>
        </div>
    </div>
    <div class="edit-conflict flex-vertical slidein-style" data-bind="visible: hasDetailsLoaded">
        <div class="flex-horizontal flex-shrink-0">
            <h3 class="on-base-background" data-bind="text: 'Resolving conflict for: ' + documentId()"></h3>
            <div class="flex-separator"></div>
            <div>
                <button class="btn btn-sm btn-info">
                    <i class="icon-info"></i>
                    <span data-bind="click: detailsVisible.toggle.bind(detailsVisible), text: detailsVisible() ? 'Hide details' : 'Show details'"></span>
                </button>
            </div>
        </div>
        <div class="scroll-horizontal">
            <div class="conflicted-files flex-stretch-items flex-horizontal" data-bind="foreach: conflictItems">
                <div class="conflicted-item flex-vertical">
                    <div class="actions padding padding-sm">
                        <div class="flex-horizontal">
                            <div class="file-info flex-grow">
                                <i class="icon-clock"></i><span class="modify-date" data-bind="text: lastModified"></span><br />
                                <!-- TODO
                                <i class="icon-database"></i><span class="source-database">ExampleDatabase</span> -->
                            </div>
                            <div>
                                <button class="btn btn-sm btn-warning usethis" title="Click to resolve with this document"
                                        data-bind="click: _.partial($root.useThis, $data), style: { visibility: deletedMarker() ? 'hidden' : 'visible' }">
                                    <i class="icon-tick"></i><span>Use this</span>
                                </button>
                            </div>
                            <a href="#" class="copy-button margin-left-sm" title="Copy document"
                               data-bind="click: _.partial($root.copyThis, $data), style: { visibility: deletedMarker() ? 'hidden' : 'visible' }">
                                <i class="icon-copy"></i>
                            </a>
                        </div>
                        <div class="details" data-bind="collapse: $root.detailsVisible, visible: !deletedMarker()">
                            <div class="flex-horizontal">
                                <div>
                                    <div class="title"><small>Document size</small></div>
                                    <div class="badge badge-default" data-bind="text: computedDocumentSize">
                                    </div>
                                </div>
                                <div class="flex-separator"></div>
                                <div>
                                    <div class="title"><small>Change vector:</small></div>
                                    <div data-bind="foreach: changeVector">
                                        <span class="badge badge-default" data-bind="text: shortFormat, attr: { title: fullFormat }"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="file scroll flex-grow flex-vertical">
                        <pre data-bind="visible: !deletedMarker()" class="flex-grow"><code data-bind="html: formattedValue"></code></pre>
                        <pre data-bind="visible: deletedMarker()" class="flex-grow"><code>Document was removed.</code></pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="margin-bottom margin-bottom-sm margin-top margin-top-sm">
            <button type="button" data-bind="click: deleteDocument" class="btn btn-danger">
                <i class="icon-trash"></i>
                <span>Delete</span>
            </button>
            <button class="btn btn-primary" data-bind="click: saveDocument"><i class="icon-save"></i> <span>Resolve and save</span></button>
        </div>
        <div class="result-file flex-grow">
            <pre id="docEditor" class="form-control absolute-fill"
                 data-bind="aceEditor: { code: suggestedResolution, fontSize:'16px', lang: 'ace/mode/raven_document' }, disable: isBusy, validationOptions: { errorsAsTitle: false }, validationElement: suggestedResolution"></pre>
        </div>
        <div data-bind="validationOptions: { errorsAsTitle: false }, validationElement: suggestedResolution">
            <div class="help-block" data-bind="validationMessage: suggestedResolution"></div>
        </div>
    </div>
</div>

<script type="text/html" id="no-conflicts-found-template">
    No conflicts found.
</script>
<div class="tooltip json-preview js-conflicts-grid-tooltip" style="opacity: 0">
    <pre><code></code></pre>
</div>

<div class="tooltip json-preview js-conflict-details-tooltip" style="opacity: 0">
</div>
